<template>
  <el-card class="box-card">
    <el-form @submit.native.prevent
             :model="form"
             ref="form"
             :inline="true"
             class="demo-ruleForm"
    >
      <el-form-item label="品名" prop="matrId" :rules="[
          { required: true, message: '耗材检索不能为空'}
        ]">
        <matr-select
          propUrl="/base/matr/page"
          :propRows="matrs"
          v-model="form.matrId"
          :propColumns="selectMatrColumns"
          propStyle="width:60vw"
          ref="matrGrid"
          @select="handleMatrSelect"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">查询</el-button>
      </el-form-item>
    </el-form>
    <!--    <div class="form-unit">耗材信息</div>-->
    <el-collapse v-model="activeName">
      <el-collapse-item title="耗材信息" id="material" name="1">
        <el-row>
          <el-col :span="8">
            <div>品名:{{ matrName }}</div>
          </el-col>
          <el-col :span="8">
            <div>品规:{{ matrSpec }}</div>
          </el-col>
          <el-col :span="8">
            <div>厂商:{{ mfgName }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div>供应商:{{ supplierName }}</div>
          </el-col>
          <el-col :span="8">
            <div>最后所在仓库:{{ warehouseName }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div>sn:{{ sn }}</div>
          </el-col>
          <el-col :span="8">
            <div>rfid:{{ rfid }}</div>
          </el-col>
          <el-col :span="8">
            <div>批次:{{ lot }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div>生产日期:{{ mfgDate }}</div>
          </el-col>
          <el-col :span="8">
            <div>有效期:{{ expDate }}</div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="耗材流通情况" name="2">
        <el-timeline>
          <el-timeline-item
            v-for="(mf,index) in matrFlow"
            :key="index"
            :color="mf.color"
            :icon="mf.icon"
          >
            <div v-if="mf.busType=='IN_SP' || mf.busType=='IN_MANUAL'">
              <el-row>
                <el-col :span="24">
                  <div>
                    入库 <i :class="activation(mf.flowStatus )" :style="colorStyle(mf.flowStatus )"></i>
                    <span>{{ mf.busDate }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>入库单号:{{ mf.busKey }}</div>
                </el-col>
                <el-col :span="8">
                  <div>入库仓库:{{ mf.warehouseName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>操作人:{{ mf.busUser }}</div>
                </el-col>
              </el-row>
              <br />
            </div>
            <div v-if="mf.busType=='OUT_SHIFT'">
              <el-row>
                <el-col :span="24">
                  <div>
                    调拨<i :class="activation(mf.flowStatus )" :style="colorStyle(mf.flowStatus )"></i>
                    <span>{{ mf.busDate }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>调拨单号:{{ mf.busKey }}</div>
                </el-col>
                <el-col :span="8">
                  <div>调拨仓库:{{ mf.warehouseName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>调入仓库:{{ mf.inWarehouseName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>操作人:{{ mf.busUser }}</div>
                </el-col>
              </el-row>
              <br />
            </div>
            <div v-if="mf.busType=='OUT_USE'">
              <el-row>
                <el-col :span="24">
                  <div>
                    消耗<i :class="activation(mf.flowStatus )" :style="colorStyle(mf.flowStatus )"></i>
                    <span>{{ mf.busDate }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>单号:{{ mf.busKey }}</div>
                </el-col>
                <el-col :span="8">
                  <div>消耗科室:{{ mf.deptName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>消耗仓库:{{ mf.warehouseName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>操作人:{{ mf.busUser }}</div>
                </el-col>
              </el-row>
              <br />
            </div>
            <div v-if="mf.busType=='OUT_SP'">
              <el-row>
                <el-col :span="24">
                  <div>
                    供应商退货<i :class="activation(mf.flowStatus )" :style="colorStyle(mf.flowStatus )"></i>
                    <span>{{ mf.busDate }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>单号:{{ mf.busKey }}</div>
                </el-col>
                <el-col :span="8">
                  <div>退货科室:{{ mf.deptName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>操作人:{{ mf.busUser }}</div>
                </el-col>
              </el-row>
              <br />
            </div>
            <div v-if="mf.busType=='IN_DEPT_RETURN'">
              <el-row>
                <el-col :span="24">
                  <div>
                    科室退货<i :class="activation(mf.flowStatus )" :style="colorStyle(mf.flowStatus )"></i>
                    <span>{{ mf.busDate }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div>单号:{{ mf.busKey }}</div>
                </el-col>
                <el-col :span="8">
                  <div>退货科室:{{ mf.deptName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>退货仓库:{{ mf.warehouseName }}</div>
                </el-col>
                <el-col :span="8">
                  <div>操作人:{{ mf.busUser }}</div>
                </el-col>
              </el-row>
              <br />
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script>
import MatrSelect from '@/components/base/MatrSelect'
/* eslint-disable */
export default {
  data() {
    return {
      form: {
        matrId: ''
      },
      activeName: ['1', '2'],
      matrData: [],
      matrName: '',
      matrSpec: '',
      mfgName: '',
      supplierName: '',
      warehouseName: '',
      sn: '',
      rfid: '',
      lot: '',
      mfgDate: '',
      expDate: '',
      matrFlow: [],
      selectMatrColumns: [
        { label: '品名', name: 'name', width: 200, search: true },
        { label: '品规', name: 'spec', width: 150, search: true },
        { label: '供应商名称', name: 'supplierName', search: true },
        { label: '单品单位', name: 'skuUnit', width: 80, search: false },
        { label: '单品单价', name: 'skuPrice', width: 80, search: false }
      ],
      matrs: []
    }
  },
  methods: {
    //选择耗材事件
    handleMatrSelect(item) {
      let { id } = item
      this.$set(this.form, 'matrId', id)
      this.onSubmit('form')
    },
    async onSubmit(formName) {
      this.matrFlow = []
      let matr = []
      await this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$ajax.get('/wm/work_order_item/getListByMatrId', { params: { matrId: this.form.matrId } }).then((res) => {
            if (res.code == 0) {
              let inWarehouseName = ''
              if (res.data.length > 0) {
                this.matrName = res.data[0].matrName
                this.matrSpec = res.data[0].matrSpec
                this.mfgName = res.data[0].mfgName
                this.supplierName = res.data[0].supplierName
                this.warehouseName = res.data[0].warehouseName
                this.sn = res.data[0].sn
                this.rfid = res.data[0].rfid
                this.lot = res.data[0].lot
                this.mfgDate = res.data[0].mfgDate
                this.expDate = res.data[0].expDate

                for (let i = 0; i < res.data.length; i += 1) {
                  //调拨入库
                  if (res.data[i].busType == 'IN_SHIFT') {
                    inWarehouseName = res.data[i].warehouseName
                    break
                  }
                }
                for (let i = 0; i < res.data.length; i += 1) {
                  //调拨入库
                  if (res.data[i].busType == 'IN_SHIFT') {
                    continue
                  }
                  let m = {}
                  m.busKey = res.data[i].busKey
                  m.warehouseName = res.data[i].warehouseName
                  m.busType = res.data[i].busType
                  m.busUser = res.data[i].busUser
                  m.busDate = res.data[i].busDate
                  // m.flowStatus = res.data[i].flowStatus = 'start' ? '制单' : '已审核'
                  m.flowStatus = res.data[i].flowStatus
                  m.deptName = res.data[i].deptName
                  if (res.data[i].busType == 'OUT_SHIFT') {
                    m.inWarehouseName = inWarehouseName
                  }
                  this.matrFlow.push(m)
                }
              } else {
                this.utilMessage.success('未查询到数据')
              }
            }
          })

        } else {
          return false
        }
      })
    }
  },
  components: {
    MatrSelect
  },
  computed:{
    activation(){
      return (icontent) => { // 使用JavaScript闭包，进行传值操作
        if (icontent === "start"){
          return 'el-icon-edit'
        }
        else  {
          return 'el-icon-check'
        }
      }
    },
    colorStyle(){
      return (icontent) => { // 使用JavaScript闭包，进行传值操作
        if (icontent === "start"){
          return {'color':'#E6A23C'}
        }
        else  {
          return {'color':'#0bbd87'}
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;

  .demo-ruleForm {
    /*padding-top: 50px;*/
    /*padding-left: 30%;*/
    padding: 2%;
  }

  #material {
    height: 200px;
  }

  div {
    font-size: 16px;
  }

  span {
    color: #4d99fc;
    padding-left: 10px;
  }
}
</style>
